<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="/common/jsp/adminHeader.jsp" flush="true"/>
<jsp:include page="/common/jsp/adminNav.jsp" flush="true"/>
<link rel="stylesheet" href="/common/css/03goods.css" />

			<section id="subpage_outer_wrap">
				<div class="subpage_inner_wrap">

					<div class="subpage_contents_inner_wrap drop_shadow">
						<div class="item_block">
							<div class="tab_1_wrap">
								<ul class="tab1_layout">
									<li class="tab1_li"><a class="tab1_btn" href="#tab1">시스템 관리</a></li>
									<li class="tab1_li"><a class="tab1_btn" href="/admin/02site/01_01.jsp">사이트 관리</a></li>
									<li class="tab1_li"><a class="tab1_btn tab_btn_selected" href="/admin/03prod/01_01.jsp">상품관리</a></li>
									<li class="tab1_li"><a class="tab1_btn" href="/admin/04statistic/01_01.jsp">주문/정산/통계 관리</a></li>
									<li class="tab1_li"><a class="tab1_btn" href="/admin/05equip/01_01.jsp">장비/신청 관리</a></li>
								</ul>
							</div>
						</div>
						<div class="item_block">
							<div class="path_wrap">
								<img class="path_bullet_home" src="/images/adm_common/header_path_home.gif" alt=""/>
								상품관리<img class="path_bullet_arrow" src="/images/adm_common/header_path_arrow.gif" alt=""/>
								상품별 조회통계
							</div>
						</div>					
					</div>
								
					<div class="subpage_contents_wrap">
						<div class="subpage_contents_inner_wrap drop_shadow">
							<h1 class="h1_1">상품별 조회통계</h1>
							<div class="item_block">
								<script>
									$(document).ready(function(){
										$real_no_collect	= new Array();	// 그래프 제품별 입력값 추출.
										$idx							= 0;						// 제품별 순번.
										$selected_max_h	= 0;						// 제품 조회 최대값 추출.
										$(".grap li").each(function() {									
											$real_no_collect[$idx]	= $(this).children(".real_no").text();									
											$idx++;
										});
										$selected_max_h          = Math.max.apply(null, $real_no_collect);	// 실제 최대값 수치 추출 ex.1900
										$(".grap li").each(function() {
											$r_n		= $(this).children(".real_no").text();			// 실제 페이지뷰값 추출.
											$r_p		= ($r_n * 100 / $selected_max_h);				// 실제 페이지뷰값을 % 로 자동 변경.
											$(this).children(".per_no").text($r_p);						// 그래프 적용을 위해 % 값을 삽입.
										});								
									});
									(function($){
										$.fn.grap = function(options){
											var opt = {
												height		: 20,
												bgcolor	: "#000"
											};
											$.extend(opt, options);
											this.each(function(){
												var ratio	= $(this).children(".per_no").text();
												var idle	= $(this).children(".real_no").width();	// 실제값 표실를 위한 여유공간 생성
												width = (Math.round((ratio * $(this).width()) / 100)) - 250;
												// $(this).append('<span class="bar" style="background:'+opt.bgcolor+'; border:1px solid #a6c5d4; border-left:0; height:'+opt.height+'px"></span>');
												$('<span class="bar" style="background:'+opt.bgcolor+'; border:1px solid #a6c5d4; height:'+opt.height+'px"></span>').insertBefore($(this).children(".per_no"));
												var bar = $('.bar',this);
												bar.animate({'width':width},700);
											});
											return this;
										};
									})(jQuery);							
									$(function(){
										$(".grap li").grap({
											height		: 20,
											bgcolor	: "#cbdde6"
										});
									});
								</script>		
								<ul class="grap">
									<li><span class="goods_name">상품20</span><span class="per_no"></span><span class="real_no">167</span></li>
									<li><span class="goods_name">상품19</span><span class="per_no"></span><span class="real_no">257</span></li>
									<li><span class="goods_name">상품18</span><span class="per_no"></span><span class="real_no">355</span></li>
									<li><span class="goods_name">상품17</span><span class="per_no"></span><span class="real_no">259</span></li>
									<li><span class="goods_name">상품16</span><span class="per_no"></span><span class="real_no">362</span></li>
									<li><span class="goods_name">상품15</span><span class="per_no"></span><span class="real_no">164</span></li>
									<li><span class="goods_name">상품14</span><span class="per_no"></span><span class="real_no">365</span></li>
									<li><span class="goods_name">상품13</span><span class="per_no"></span><span class="real_no">266</span></li>
									<li><span class="goods_name">상품12</span><span class="per_no"></span><span class="real_no">370</span></li>
									<li><span class="goods_name">상품11</span><span class="per_no"></span><span class="real_no">477</span></li>
									<li><span class="goods_name">상품10</span><span class="per_no"></span><span class="real_no">270</span></li>
									<li><span class="goods_name">상품09</span><span class="per_no"></span><span class="real_no">352</span></li>
									<li><span class="goods_name">상품08</span><span class="per_no"></span><span class="real_no">163</span></li>
									<li><span class="goods_name">상품07</span><span class="per_no"></span><span class="real_no">359</span></li>
									<li><span class="goods_name">상품06</span><span class="per_no"></span><span class="real_no">156</span></li>
									<li><span class="goods_name">상품05</span><span class="per_no"></span><span class="real_no">262</span></li>
									<li><span class="goods_name">상품04</span><span class="per_no"></span><span class="real_no">369</span></li>
									<li><span class="goods_name">상품03</span><span class="per_no"></span><span class="real_no">475</span></li>
									<li><span class="goods_name">상품02</span><span class="per_no"></span><span class="real_no">295</span></li>
									<li><span class="goods_name">상품01</span><span class="per_no"></span><span class="real_no">382</span></li>
								</ul>
							</div>
							<div class="item_block">
								<p class="goods_statistics">&diams;&nbsp;상품별 조회통계</p>
								<p class="goods_statistics_desc">조회건수가 상위 20개만 표시됩니다.</p>							
							</div>
						</div>						
					</div>
				</div>
			</section>
		
<jsp:include page="/common/jsp/adminFooter.jsp" flush="true"/>